﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test1.aspx.cs" Inherits="DemoApplication.JqValidate.test1" %>

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery validation plug-in - main demo</title>

    <link rel="stylesheet" href="screen.css" />
    <script src="jquery-1.9.0.js"></script>
    <script src="jquery.validate.js"></script>
    <style type="text/css">
        #commentForm {
            width: 500px;
        }

            #commentForm label {
                width: 250px;
            }

                #commentForm label.error, #commentForm input.submit {
                    margin-left: 253px;
                }

        #signupForm {
            width: 670px;
        }

            #signupForm label.error {
                margin-left: 10px;
                width: auto;
                display: inline;
            }

        #newsletter_topics label.error {
            display: none;
            margin-left: 103px;
        }
    </style>
</head>
<body>
    <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
    <div id="main">

        <form class="cmxform" id="signupForm" method="get" runat="server">
            <fieldset>
                <legend>Validating a complete form</legend>
                <p>
                    <label for="firstname">Firstname</label>
                    <input id="firstname" name="firstname" type="text" />
                </p>
                <p>
                    <label for="username">Username</label>
                    <input id="username" name="username" type="text" />
                </p>
                <p>
                    <label for="password">Password</label>
                    <input id="password" name="password" type="password" />
                </p>
                <p>
                    <label for="confirm_password">Confirm password</label>
                    <input id="confirm_password" name="confirm_password" type="password" />
                </p>
                <p>
                    <label for="email">Email</label>
                    <input id="email" name="email" type="email" />
                </p>
                <p>
                    <label for="agree">Please agree to our policy</label>
                    <input type="checkbox" class="checkbox" id="agree" name="agree" />
                </p>
                <p>
                    <label>Num1</label>
                    <input type="text" id="num1" name="num1" />
                </p>
                <p>
                    <label>Num2</label>
                    <input type="text" id="num2" name="num2" />
                </p>
                <p>
                    <label>Sum</label>
                    <input type="text" id="sum" name="sum" />
                </p>
                <p>
                    <asp:Button runat="server" OnClientClick="return check();" Text="Save" />
                </p>
            </fieldset>
        </form>
    </div>
</body>
</html>
<script>
    $.validator.addMethod("formula", function (value, element, param) {
        if (parseInt(param[0].value) + parseInt(param[1].value) == parseInt(value)) {
            return true;
        }
        return false;
    }, "请正确输入数学公式计算后的结果");

    // validate the comment form when it is submitted
    //$("#commentForm").validate();
    // validate signup form on keyup and submit
    var test = $("#signupForm").validate({
        rules: {
            firstname: "required",
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true
            },
            topic: {
                required: "#newsletter:checked",
                minlength: 2
            },
            agree: "required",
            num1: {
                required: true,
                number: true
            },
            num2: {
                required: true,
                number: true
            },
            sum: {
                formula: [document.getElementById("num1"), document.getElementById("num2")]
            }
        },
        messages: {
            firstname: "不允许为空",
            username: {
                required: "不允许为空",
                minlength: "长度最少2个字符"
            },
            password: {
                required: "不允许为空",
                minlength: "长度最少5个字符"
            },
            confirm_password: {
                required: "不允许为空",
                minlength: "长度最少5个字符",
                equalTo: "2次密码必须一致"
            },
            email: {
                required: "不允许为空",
                email: "email格式必须正确"
            },
            agree: "不允许不选择",
            num1: {
                required: "不允许为空.",
                number: "必须为数字"
            },
            num2: {
                required: "不允许为空.",
                number: "必须为数字"
            },
            sum: {
                formula: "error"
            }
        }
    });

    function check() {
        var errArr = [];
        for (var i in test.invalid) {
            errArr.push(i);
        }
        alert(errArr.length);
        if (errArr.length != 0) {
            return false;
        }
        return true;
    }
</script>
